<template>
  <!-- 首页 -->
  <div class="">
    <!-- nav -->
    <myNav></myNav>
    <!-- banner -->
    <div class="banner">
      <!-- pc -->
      <div class="banner-pc" style="">
        <!-- Using the slider component -->
        <slider ref="slider" :options="options">
          <!-- slideritem wrapped package with the components you need -->
          <!-- pc -->
          <slideritem
            class=""
            v-for="(item, index) in bannerPcList"
            :key="index"
          >
            <div class="banner-item">
              <img
                :src="
                  item.bannerimg
                    ? require(`../assets/image/${item.bannerimg}`)
                    : ''
                "
                alt=""
              />
            </div>
          </slideritem>
          <!-- Customizable loading -->
          <!-- <div slot="loading">loading...</div> -->
        </slider>
      </div>
      <!-- 移动 -->
      <div class="banner-mobile" style="">
        <!-- Using the slider component -->
        <slider ref="slider" :options="options">
          <!-- slideritem wrapped package with the components you need -->
          <slideritem
            class=""
            v-for="(item, index) in bannerMobileList"
            :key="index"
          >
            <div class="banner-item">
              <img
                :src="
                  item.bannerimg
                    ? require(`../assets/image/${item.bannerimg}`)
                    : ''
                "
                alt=""
              />
            </div>
          </slideritem>
          <!-- Customizable loading -->
          <!-- <div slot="loading">loading...</div> -->
        </slider>
      </div>
    </div>
    <!-- 橘色条 -->
    <div class="orange-case">
      <div class="orange-container dflex-between">
        <div class="orange-case-item dflex">
          <div class="iconbox">
            <img src="../assets/image/案例.png" alt="" />
          </div>
          <div class="case-text color-white">
            <div class="font-center border-r pr">
              {{ $t("casetexttitle1") }}
            </div>
            <div class="font-12 font-center">{{ $t("casetextsubtitle1") }}</div>
          </div>
        </div>
        <div class="orange-case-item dflex">
          <div class="iconbox">
            <img src="../assets/image/案例.png" alt="" />
          </div>
          <div class="case-text color-white">
            <div class="font-center border-r pr">
              {{ $t("casetexttitle2") }}
            </div>
            <div class="font-12 font-center">{{ $t("casetextsubtitle2") }}</div>
          </div>
        </div>
        <div class="orange-case-item dflex">
          <div class="iconbox">
            <img src="../assets/image/案例.png" alt="" />
          </div>
          <div class="case-text color-white">
            <div class="font-center">{{ $t("casetexttitle3") }}</div>
            <div class="font-12 font-center">{{ $t("casetextsubtitle3") }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 集团简介 -->
    <div class="jianjie">
      <div class="container-jianjie">
        <div class="jianjie-title text-center">{{ $t("jianjietitle") }}</div>
        <div class="jianjie-subtitle text-center">GROUP PROFILE</div>
        <div class="p1">
          {{ $t("p1") }}
        </div>
        <div class="p1">
          {{ $t("p2") }}
        </div>
        <div class="p1">
          {{ $t("p3") }}
        </div>
        <!-- 移动端 -->
        <div class="jianjie-pc-article">
          一秋网络安全战队创建于2008年,其前身是"红客联盟核心团队".2017年
          一秋网络安全战队创建于2008年,其前身是"红客联盟核心团队".2017年一秋网络安全战队创建于2008年,其前身是"红客联盟核心团队".2017年一秋网络安全战队创建于2008年,其前身是"红客联盟核心团队".2017年
        </div>
        <!-- more按钮 -->
        <div class="more-btn">MORE</div>
      </div>
    </div>
    <!-- 蓝色四块 -->
    <div class="blue-block">
      <div class="blue-block-1">
        <div class="blue-block-year">2008年</div>
        <div class="blue-block-title">红客联盟核心团队</div>
      </div>
      <div class="blue-block-2 blue-block-1">
        <div class="blue-block-year">2017年</div>
        <div class="blue-block-title">一秋网络科技有限公司</div>
      </div>
      <div class="blue-block-3 blue-block-1">
        <div class="blue-block-year">2021年</div>
        <div class="blue-block-title">一秋集团</div>
      </div>
      <div class="blue-block-4 blue-block-1">
        <div class="blue-block-year">3个分公司</div>
        <div class="blue-block-title">吉林/沈阳/海南3个地区建立分公司</div>
      </div>
    </div>
    <!-- 服务体系 -->
    <div class="server">
      <div class="server-title text-center">{{ $t("servertitle") }}</div>
      <div class="server-subtitle text-center">SERVICE AREA</div>
      <!-- 内容 -->
      <div class="server-container">
        <!-- 类气泡框 -->
        <div class="server-container-qipao">
          <div class="qipao-list">
            <div class="qipao-imgbox">
              <img src="../assets/image/组 36.png" alt="" />
            </div>
            <div class="qipao-text">
              <div class="qipao-text-title">{{ $t("qipaotitle1") }}</div>
              <div class="qipao-text-subtitle">
                {{ $t("qipaosubtitle1") }}
              </div>
            </div>
          </div>
          <div class="qipao-list">
            <div class="qipao-imgbox">
              <img src="../assets/image/组 36.png" alt="" />
            </div>
            <div class="qipao-text">
              <div class="qipao-text-title">{{ $t("qipaotitle2") }}</div>
              <div class="qipao-text-subtitle">
                {{ $t("qipaosubtitle2") }}
              </div>
            </div>
          </div>
          <div class="qipao-list">
            <div class="qipao-imgbox">
              <img src="../assets/image/组 36.png" alt="" />
            </div>
            <div class="qipao-text">
              <div class="qipao-text-title">{{ $t("qipaotitle3") }}</div>
              <div class="qipao-text-subtitle">
                {{ $t("qipaosubtitle3") }}
              </div>
            </div>
          </div>
        </div>
        <!-- 循环 -->
        <div
          class="server-container-top"
          v-for="(item, index) in serverlist"
          :key="index"
        >
          <div
            @click="handleServerColor(index)"
            :class="[
              isserverActive == index ? 'server-container-title-active' : '',
            ]"
            class="server-container-title"
          >
            {{ item.title }}
          </div>
          <div class="server-container-subtitle">{{ item.subtitle }}</div>
        </div>
      </div>
    </div>
    <!-- 创建网络安全环境 -->
    <div><img src="../assets/image/安全环境.png" alt="" /></div>
    <!-- 新闻动态 -->
    <div class="news">
      <div class="news-title text-center">{{ $t("newstitle") }}</div>
      <div class="news-subtitle text-center">CASE STUDY</div>
      <div class="news-container">
        <div class="news-l">
          <div class="news-nohover">
            <div class="news-l-title">{{ $t("newsltitle") }}</div>
            <div>The company</div>
          </div>
          <div class="news-hover">
            <span style="font-size: 20px; font-weight: 600">{{
              $t("newsltitle")
            }}</span>
            <span>/</span><span>The company</span>
          </div>
          <ul class="news-list">
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
          </ul>

          <div class="news-more">{{ $t("newsmore") }}</div>
        </div>
        <div class="news-l news-center">
          <div class="news-nohover">
            <div class="news-l-title">{{ $t("newsctitle") }}</div>
            <div>The company</div>
          </div>
          <div class="news-hover">
            <span style="font-size: 20px; font-weight: 600">{{
              $t("newsctitle")
            }}</span>
            <span>/</span><span>The company</span>
          </div>
          <ul class="news-list">
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
          </ul>

          <div class="news-more">{{ $t("newsmore") }}</div>
        </div>
        <div class="news-l">
          <div class="news-nohover">
            <div class="news-l-title">{{ $t("hangyeactive") }}</div>
            <div>The company</div>
          </div>
          <div class="news-hover">
            <span style="font-size: 20px; font-weight: 600">{{
              $t("hangyeactive")
            }}</span>
            <span>/</span><span>The company</span>
          </div>
          <ul class="news-list">
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
            <li>{{ $t("newslist") }}</li>
          </ul>

          <div class="news-more">{{ $t("newsmore") }}</div>
        </div>
      </div>
    </div>
    <!-- 公司案例 -->
    <div class="companycase">
      <div class="companycase-title text-center">{{ $t("newsrtitle") }}</div>
      <div class="companycase-subtitle text-center">CASE STUDY</div>
      <!-- 第一排列表 -->
      <div class="companycase-nav">
        <div
          @click="handleColor(index)"
          class="companycase-nav-item"
          :class="[iscompanycaseActive == index ? 'companycase-active' : '']"
          v-for="(item, index) in caseitemlist"
          :key="index"
        >
          {{ item.case }}
        </div>
      </div>

      <!-- 第二排类轮播图 -->
      <div class="companycase-banner">
        <div style="">
          <slider ref="slider" :options="companyoptions">
            <slideritem
              style="width: 800px"
              v-for="(item, index) in companycaseList"
              :key="index"
            >
              <div class="companycase-banner-slideitem">
                <div class="companycase-banner-image">
                  <img
                    :src="
                      item.leftimg
                        ? require(`../assets/image/${item.leftimg}`)
                        : ''
                    "
                    alt=""
                  />
                </div>
                <div class="companycase-banner-text">
                  <div class="companycase-banner-text-title">
                    {{ item.title }}
                  </div>
                  <div class="companycase-banner-text-article">
                    {{ item.article }}
                  </div>
                  <div class="companycase-banner-text-getmore">
                    {{ $t("companycasebannertextgetmore") }}
                  </div>
                </div>
              </div>
            </slideritem>
          </slider>
        </div>
      </div>
    </div>
    <!-- 合作伙伴 -->
    <div class="partner">
      <div class="partner-title text-center">{{ $t("partnertitle") }}</div>
      <div class="partner-subtitle text-center">PARTNER</div>
      <div class="partner-banner">
        <div class="" style="">
          <slider ref="slider" :options="partneroptions">
            <slideritem v-for="(item, index) in partnerList" :key="index">
              <div class="partner-slide-item">
                <!-- 每个合作伙伴icon -->
                <div
                  v-for="(item, index) in partnerlogo"
                  :key="index"
                  class="icon-text-item"
                >
                  <img
                    style="width: 250px"
                    :src="
                      item.logo ? require(`../assets/image/${item.logo}`) : ''
                    "
                    alt=""
                  />
                </div>
              </div>
            </slideritem>
          </slider>
        </div>
      </div>
    </div>
    <!-- 联系咨询 -->
    <div class="connect">
      <div class="text-center connect-top">
        {{ $t("connecttop") }}
      </div>
      <div class="connect-bottom">{{ $t("connectbottom") }}</div>
    </div>
    <!-- links -->
    <links></links>
    <!-- footer -->
    <myfooter></myfooter>
    <!-- 侧边栏返回顶部 -->
    <returnTop></returnTop>
  </div>
</template>

<script>
import myfooter from "../components/myFooter.vue";
import links from "../components/links.vue";
import { slider, slideritem } from "vue-concise-slider";
import myNav from "../components/myNav.vue";
import returnTop from "../components/returnTop.vue";

export default {
  name: "home",
  components: {
    slider,
    slideritem,
    myNav,
    myfooter,
    links,
    returnTop,
  },
  data() {
    return {
      // 服务体系高亮
      isserverActive: "",
      // 服务体系两个

      serverlist: [
        { title: "网络安全", subtitle: "提供网络安全相关服务" },
        { title: "软件开发", subtitle: "提供网络安全相关服务" },
      ],
      // 公司案例item列表
      caseitemlist: [
        { case: "安全案例" },
        { case: "Web官网" },
        { case: "App应用" },
        { case: "小程序" },
        { case: "公众号" },
        { case: "全部" },
      ],
      iscompanycaseActive: "",
      // 轮播图pc
      bannerPcList: [
        {
          bannerimg: "banner-pc.png",
        },
        {
          bannerimg: "banner-pc.png",
        },
        {
          bannerimg: "banner-pc.png",
        },
        {
          bannerimg: "banner-pc.png",
        },
      ],
      // 轮播图移动
      bannerMobileList: [
        {
          bannerimg: "banner-mobile.png",
        },
        {
          bannerimg: "banner-mobile.png",
        },
        {
          bannerimg: "banner-mobile.png",
        },
        {
          bannerimg: "banner-mobile.png",
        },
      ],

      options: {
        pagination: true,
        thresholdDistance: 100, // Sliding distance threshold
        thresholdTime: 300, // Sliding time threshold decision
        speed: 300, // Sliding speed
        // timingFunction: 'ease', // Sliding mode
        // loop: false, // Infinite loop
        // autoplay: 0 // Auto play[ms]
      },
      // 公司案例轮播
      companycaseList: [
        {
          // 图片
          leftimg: "案例配图.png",
          // 标题
          title: " 长春宏盛国际智慧成长中心",
          // 内容
          article:
            "项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍",
        },
        {
          // 图片
          leftimg: "案例配图.png",
          // 标题
          title: " 长春宏盛国际智慧成长中心",
          // 内容
          article:
            "项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍",
        },
        {
          // 图片
          leftimg: "案例配图.png",
          // 标题
          title: " 长春宏盛国际智慧成长中心",
          // 内容
          article:
            "项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍",
        },
      ],
      //Slider configuration [obj]
      companyoptions: {
        currentPage: 0,
        speed: 300,
        itemAnimation: true,
        centeredSlides: true,
        thresholdDistance: 100,
        thresholdTime: 300,
        loopedSlides: 2,
        slidesToScroll: 1,
        loop: true,
      },
      // 合作伙伴暂时占位banner

      partnerList: [{}, {}, {}],
      // 合作伙伴logo
      partnerlogo: [
        {
          logo: "合作客户logo.png",
        },
        {
          logo: "合作客户logo.png",
        },
        {
          logo: "合作客户logo.png",
        },
        {
          logo: "合作客户logo.png",
        },
        {
          logo: "合作客户logo.png",
        },
        {
          logo: "合作客户logo.png",
        },
        {
          logo: "合作客户logo.png",
        },
        {
          logo: "合作客户logo.png",
        },
      ],
      partneroptions: {
        pagination: true,
        thresholdDistance: 100,
        thresholdTime: 300,

        speed: 300,
      },
    };
  },
  methods: {
    // 公司案例
    handleColor(index) {
      this.iscompanycaseActive = index;
    },
    // 服务体系
    handleServerColor(index) {
      this.isserverActive = index;
    },
    // 返回顶部
    returnTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
img {
  display: block;
  width: 100%;
}

// pc端(大于768)
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  // pc共有样式
  .dflex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .dflex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dflex {
    display: flex;
    align-items: center;
  }
  .color-white {
    color: #fff;
  }
  .font-12 {
    font-size: 12px;
  }

  // banner
  .banner-mobile {
    display: none;
  }

  // 橘色条
  .orange-case {
    background: orange;

    .orange-container {
      margin: 0 auto;
      width: 1200px;
      padding: 10px 0;
      .orange-case-item {
        width: 25%;
        border-right: 1px solid #fff;
        // margin-right: 50px;
      }
      .orange-case-item:last-child {
        border-right: none;
      }
      .iconbox {
        // width: 30px;
        // margin-right: 10px;
      }
    }
  }
  // 集团简介
  .jianjie {
    padding-bottom: 40px;
    background: url("../assets/image/简介-pc.png") no-repeat right;
    background-position: -100px -170px;

    // height: 570px;
    .container-jianjie {
      margin: 0 auto;
      width: 1200px;
      .jianjie-title {
        font-size: 26px;
        font-weight: 600;
        padding-top: 40px;
        color: #000;
      }
      .p1 {
        margin-bottom: 20px;
        padding-top: 20px;
        width: 50%;
      }
      .more-btn {
        width: 100px;
        height: 30px;
        background: orange;
        color: #fff;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
      }
      .jianjie-pc-article {
        display: none;
      }
    }
  }
  // 蓝色四块
  .blue-block {
    display: flex;
    .blue-block-year {
      margin-left: 60px;
      color: #fff;
      font-weight: 600;
      font-size: 20px;
      margin-bottom: 30px;
    }
    .blue-block-title {
      margin-left: 60px;
      color: #fff;
    }
    .blue-block-1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 25%;
      height: 300px;
      background: url("../assets/image/历程1.png") no-repeat center;
    }
    .blue-block-2 {
      width: 25%;

      height: 300px;
      background: url("../assets/image/历程2.png") no-repeat center;
    }
    .blue-block-3 {
      width: 25%;

      height: 300px;
      background: url("../assets/image/历程3.png") no-repeat center;
    }
    .blue-block-4 {
      width: 25%;

      height: 300px;
      background: url("../assets/image/历程4.png") no-repeat center;
    }
  }
  // 服务体系
  .server {
    background: #f5f8fd;
    .server-container-qipao {
      box-shadow: 0 0 10px #ccc;
      position: absolute;
      left: 600px;
      margin-top: 10px;
      .qipao-list {
        display: flex;
        background: #fff;
        justify-content: space-between;
        padding: 20px;
        .qipao-imgbox {
          width: 60px;
          margin-right: 20px;
        }
        .qipao-text-title {
          color: #000;
          font-weight: 600;
        }
        .qipao-text-subtitle {
          white-space: normal;
          width: 500px;
          overflow: auto;
        }
      }
      .qipao-list:first-child {
        background: #edf3fe;
      }
    }
    .server-title {
      font-size: 30px;
      color: #000;
      font-weight: 600;
    }
    .server-subtitle {
      margin-bottom: 30px;
    }
    padding: 20px 0;
    .server-container {
      position: relative;
      display: flex;
      height: 400px;
      padding: 0 400px;
      justify-content: space-between;
      flex-direction: column;
      .server-container-top {
        position: relative;

        padding: 30px 0;
        .server-container-title {
          color: #ccc;
          font-size: 26px;
          cursor: pointer;
          width: 110px;
        }
        .server-container-title-active {
          color: #000;
          border-bottom: 5px solid orange;
        }
        .server-container-title:hover .server-container-qipao {
          // display: block;
        }
        .server-container-subtitle {
          margin-top: 10px;
        }
      }
    }
  }
  // 新闻动态
  .news {
    background: #f5f8fd;
    .news-title {
      font-size: 30px;
      color: #000;
      font-weight: 600;
    }
    padding: 20px;
    .news-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px 0 20px 0;
      .news-l {
        transition: transform 0.25s ease;
        background: #fff;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .news-l-title {
          font-weight: 600;
          font-size: 20px;
          color: #000;
        }
        .news-more {
          align-self: flex-end;
        }
        .news-list {
          padding: 30px 0;
          color: #000;
          li {
            margin-bottom: 10px;
          }
        }
      }
      // 滑动放大效果和改变背景
      .news-l:hover {
        transform: scale(1.2, 1.2);
        box-shadow: 0 0 10px #ccc;
        cursor: pointer;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        .news-list {
          padding: 20px;
        }
        .news-hover {
          display: block;
        }
        .news-nohover {
          display: none;
        }
      }
      .news-hover {
        display: none;
        color: #fff;
        text-align: center;
        line-height: 80px;
        width: 100%;
        height: 80px;
        background: url("../assets/image/新闻.png") no-repeat 100%;
      }
      .news-center {
        margin: 0 10px;
      }
    }
  }
  // 公司案例
  .companycase {
    .slider-item {
      transform: scale(0.8);
      transition-timing-function: ease;
      transition-duration: 300ms;
    }
    .slider-item.slider-active {
      transform: scale(1);
      z-index: 999;
    }
    .slider-item.slider-active-copy {
      transform: scale(1);
      z-index: 999;
    }
    background: #343d76;
    .companycase-title {
      font-size: 30px;
      color: #fff;
      font-weight: 600;
    }
    .companycase-subtitle {
      color: #fff;
    }
    padding: 20px;

    .companycase-nav {
      padding: 10px 30px;
      padding-bottom: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      .companycase-nav-item {
        cursor: pointer;
        border: 1px solid #ccc;
        color: #ccc;
        text-align: center;
        padding: 5px 20px;
        margin-right: 10px;
      }
      //  添加nav-item高亮
      .companycase-active {
        color: #fff;
      }
    }
    .companycase-banner {
    }
    .companycase-banner-slideitem {
      display: flex;
      background: #fff;
      .companycase-banner-image {
      }
    }

    .companycase-banner-text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 20px;
      .companycase-banner-text-title {
        white-space: normal;
        width: 300px;
        overflow: auto;
        font-size: 18px;

        color: #000;
        text-align: left;
      }
      .companycase-banner-text-article {
        color: #000;
        font-size: 16px;
        white-space: normal;
        width: 300px;
        overflow: auto;
        font-weight: normal;
        text-align: left;
        margin: 10px 0;
      }
      .companycase-banner-text-getmore {
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        width: 70%;
        font-weight: normal;
        text-align: center;
        background: orange;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  // 合作伙伴
  .partner {
    padding: 30px 0;

    .partner-title {
      font-size: 30px;
      color: #000;
      font-weight: 600;
    }
    .partner-banner {
      width: 1200px;
      margin: 0 auto;
      padding-top: 30px;

      .partner-slide-item {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .icon-text-item {
          width: 24%;
          border: 1px solid #ccc;
          margin-bottom: 20px;
          background: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    background: url("../assets/image/合作伙伴背景.png") no-repeat center;
    padding: 20px;
  }

  // 联系咨询
  .connect {
    background: url("../assets/image/orange-bgimage.png") no-repeat center;
    padding: 20px 0;
    .connect-top {
      color: #fff;
      font-size: 20px;
      margin-bottom: 20px;
    }
    .connect-bottom {
      width: 160px;
      color: #fff;
      margin: 0 auto;
      height: 30px;
      border-radius: 30px;
      border: 1px solid #fff;
      text-align: center;
      line-height: 30px;
    }
  }
}

// 移动端
@media (max-width: 768px) {
  // 移动端共有样式
  .dflex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .font-center {
    text-align: center;
    margin-bottom: 5px;
  }
  .border-r {
    border-right: 1px solid #ccc;
  }
  .pr {
    padding-right: 10px;
  }
  .font-12 {
    font-size: 12px;
  }
  // banner
  .banner-pc {
    display: none;
  }
  //橘色条
  .orange-case {
    background: skyblue;
    padding: 10px 0;
    .orange-case-item {
      .iconbox {
        width: 30px;
        margin: 0 auto;
        margin-bottom: 10px;
      }
    }
  }
  // 集团简介
  .jianjie {
    background: pink;
    padding: 40px 5px;
    .title {
      text-align: center;
      color: #000;
      font-weight: 600;
      font-size: 30px;
    }
    .p1 {
      display: none;
    }
    .jianjie-pc-article {
      font-size: 18px;
      line-height: 30px;
      color: #000;
    }
  }
}

// 大于992
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

// 大于1200px
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
</style>
